<template>
    <div class="mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 cursor-pointer">
      <div v-for="tool in processedTools" :key="tool.toolId" @click="handleToolClick(tool)">
        <div class="tool-card group relative bg-white dark:bg-gray-800 rounded-2xl shadow-md p-6 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 hover:rotate-1">
          <div class="absolute inset-0 rounded-2xl bg-blur opacity-0 group-hover:opacity-50 blur-xl transition duration-500" :class="tool.class"/>
          <div class="relative flex items-center space-x-4">
            <div class="icon-bg rounded-full text-white shadow-lg" :class="tool.class">
              <CustomImage
                :src="tool.localLogoPath"
                :alt="tool.toolName"
                img-class="lazy-image"
                type="logo"
              />
            </div>
            <div>
              <h3 class="text-lg font-bold text-gray-800 dark:text-gray-100">{{ tool.toolName }}</h3>
              <div class="flex flex-wrap gap-2 mt-1">
                <span
                  v-for="(tagItem, index) in getProcessedTags(tool.tags)"
                  :key="`${tagItem.tag}-${index}`"
                  class="px-2 py-0.5 text-xs rounded-full transition-all duration-200 hover:scale-105"
                  :class="[tagItem.color.bgColor, tagItem.color.textColor]"
                >
                  {{ tagItem.tag }}
                </span>
              </div>
            </div>
          </div>
          <p class="mt-4 text-gray-600 dark:text-gray-300 text-sm leading-relaxed font-bold description-text">{{ tool.description }}</p>
          <div class="mt-5 flex items-center justify-between">
            <div class="text-gray-400 dark:text-gray-500 text-xs flex items-center">👁️ <span class="ml-1">{{ tool.viewHotScore }}</span></div>
            <div class="visit-btn relative z-5 inline-block text-white text-sm font-medium px-3 py-1.5 rounded-full shadow-md hover:scale-105 transition" :class="tool.class" @click.stop="handleVisitClick(tool)">访问吧！</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
/**
 * 工具卡片组件脚本
 * 展示工具列表，每个工具以卡片形式显示
 * 包含工具图标、标题、描述、标签和访问链接
 */

import type { ProcessedToolItem } from './types';
import type { ToolItem } from '~/types/tools';
import { processToolTags, type TagColorCombination, randomGradient } from './toolUtils';

/**
 * 组件属性定义
 */
interface Props {
  /** 原始工具列表数据 */
  tools: ToolItem[];
}

// 定义组件属性
const props = defineProps<Props>();

/**
 * 处理后的工具列表
 * 为每个工具添加随机页面浏览量(PV)和渐变色类名
 */
const processedTools = computed<ProcessedToolItem[]>(() => {
  return props.tools?.map((tool, index) => ({
    ...tool,
    class: randomGradient(index).join(' ')  // 生成随机渐变色类名
  })) || [];
});

/**
 * 使用工具工具函数
 * 包含默认logo、图片错误处理和懒加载功能
 */
// 组件挂载时初始化图片懒加载（由LazyImage组件内部处理）

/**
 * 处理工具标签显示
 * 最多显示4个标签，并为每个标签分配随机颜色
 * @param {string[]} tags - 工具标签数组
 * @returns {Array<{tag: string, color: TagColorCombination}>} 处理后的标签数组
 */
const getProcessedTags = (tags: string[]): Array<{tag: string, color: TagColorCombination}> => {
  return processToolTags(tags);
};

/**
 * 获取运行时配置
 */
/**
 * 初始化图片懒加载
 * 现在由LazyImage组件内部处理，无需在父组件中初始化
 */

const router = useRouter();

/**
 * 点击卡片跳转
 * @param tool  ProcessedToolItem
 */
const handleToolClick = (tool: ProcessedToolItem) => {
  router.push(`/tool-detail/${tool.toolId}`);
}

/**
 * 点击访问吧
 * @param tool  ProcessedToolItem
 */
const handleVisitClick = (tool: ProcessedToolItem) => {
  window.open(tool.url, '_blank');
}
</script>

<style scoped>
@import './toolStyles.less';

.description-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.8em; /* 确保至少有两行的高度 */
  line-height: 1.4em; /* 与 leading-relaxed 对应 */
}
</style>